<template>
  <div align="left" class="add-border">
    <el-tabs v-model="activeId" @tab-click="handleClick">
      <el-tab-pane label="全部" name="0">
        <p style="margin: 10px;">全部商品</p>
      </el-tab-pane>
      <el-tab-pane
        v-for="(item,index) in category"
        :label="item.categoryName"
        :name="item.categoryId + ''"
        :key="index"
      >
        <p style="margin: 10px;">{{item.categoryDesc}}</p>
      </el-tab-pane>
    </el-tabs>
    <!-- <br />
    <br />
    <br />
    <br />
    <br />
    <el-row>
      <el-col :span="3">
        <div class="grid-content" style="display: flex;"></div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content" style="display: flex;"></div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content" style="display: flex;"></div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content" style="display: flex;"></div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content" style="display: flex;"></div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content" style="display: flex;"></div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content" style="display: flex;"></div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content" style="display: flex;"></div>
      </el-col>
    </el-row>-->
  </div>
</template>

<script>
export default {
  name: "StoreHeader",
  data() {
    return {
      activeId: "0",
      msg: "Welcome to Your Vue.js App",
      storeId: 1,
      category: [],
    };
  },
  methods: {
    handleClick(tab, event) {
      this.$emit("changeCategory", this.activeId);
    },
    init(categorys) {
      this.category = categorys;
      this.category = this.sorBypriority("priority");
    },
    sorBypriority(key) {
      return this.category.sort((a, b) => {
        var x = a[key];
        var y = b[key];
        return x - y;
      });
    },
  },
  computed: {},
  created() {},
};
</script>
<style scoped>
.grid-content {
  min-height: 40px;
  /* border: 1px solid #ff0000; */
}

.add-border {
  border: 1px solid #ffffff;
}
</style>
